<!DOCTYPE html>
<html>
    <body>
    <head>
    <link href="https://fonts.googleapis.com/css?family=Lora|Permanent+Marker" rel="stylesheet">
    
    <style>
    
        body{
            background-image: url("https://images7.alphacoders.com/713/713678.jpg");
            background-color: black;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100vw;
            margin: 0;
        }
        
        ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            margin: 0;
        }
        
        li{
            float: left;
            padding: 40px;
            color: white;
        }
        
        li a{
            color:white;
            font-family: 'Lora', serif;
            font-size: 25px;
            text-decoration: none;
            display: block;
        }
        
        li:hover {
            background-color: #267492;
        }
        
        text{
           padding-top: 300px;
           font-family:'Permanent Marker', cursive;
           font-size: 50px;
           padding: 200px;
           color: white;
        }
        
        text2{
            padding-top: 250px;
            font-family:'Permanent Marker', cursive;
            font-size: 40px;
            padding-left: 388px;
            color: white;
        }
        
        div.description{
            padding-left: 100px;
            padding-top: 300px;
        }
        
    </style>
    
    </head>
    
    <ul>
        <li> <a href="home.html">Home</a></li>
        <li> <a href="aboutus.html">About us</a></li>
        <li> <a href="select.html">Select City</a></li>
        <li> <a href="contact.html">Contact Us</a></li>
    </ul>
    
    <div class = "description">
    	<p> <text> Welcome to Airquility, </text> </p>
        <text2> the air quality prediction AI. </text2>
    </div>
    
    </body>
</html>